<template>
  <div class="h-main p-4">
    <MyTable
      v-loading="loading"
      class="my-2"
      :data="list"
      :columns="columns"
      :is-show-selection="false"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
  </div>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD.js";
import MyTable from "@/components/MyTable.vue";
import { getCompanyRobotList } from "@/api/disinfect/robot-manage";
import { useRouter } from "vue-router";

const router = useRouter();

const columns = [
  { label: "编号", prop: "id" },
  { label: "机器人型号", prop: "type" },
  { label: "机器人唯一码", prop: "code" },
  { label: "上线时间", prop: "createTime" },
  { label: "更新时间", prop: "usageTimes" },
  {
    label: "状态",
    prop: "status",
    formatter(row) {
      return row.status === "0" ? "禁止" : "启动";
    },
  },
  {
    label: "故障信息",
    customRender(row) {
      return (
        <el-button text bg type="primary" onClick={() => showHistory(row.code)}>
          查看故障历史
        </el-button>
      );
    },
  },
];

const crudOptions = { queryApi: getCompanyRobotList };
const { params, list, loading, total, handleQuery } = useCRUD(crudOptions);
handleQuery();

function showHistory(code) {
  router.push({
    name: "disinfect-fault-history",
    query: { code },
  });
}
</script>
